<template lang="html">
  <div class="detail">
    <v-swiper v-if="list.swiper" :swiper="list.swiper"></v-swiper>
    <v-chose v-if="list.view" :view="list.view"></v-chose>
    <v-content v-if="list.contentImgSrc" :content="list.contentImgSrc" ></v-content>
    <v-baseline ></v-baseline>
    <v-footer v-if="list.swiper && list.view" :view="list.view" :swiper="list.swiper"></v-footer>
  </div>
</template>

<script>
import Swiper from "@/components/detail/swiper.vue";
import Chose from "@/components/detail/chose.vue";
import Content from "@/components/detail/content.vue";
import Footer from "@/components/detail/footer.vue";
import Baseline from "@/common/_baseline.vue";
import detail from "../http/detail";
export default {
  components: {
    "v-swiper": Swiper,
    "v-chose": Chose,
    "v-content": Content,
    "v-footer": Footer,
    "v-baseline": Baseline,
  },
  data(){
    return {
      list: {}
    }
  },

  mounted() {
    detail.query().then(res => {
      this.list=res.data.filter(item => item.id === this.$route.query.id)[0];
      console.log(this.list)
    })
  },
};
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  padding-bottom: 14vw;
}
</style>
